import React, { Component } from 'react';
import { Row, Col, Card, Tabs, DatePicker } from 'antd';
import { FormattedMessage, formatMessage } from 'umi-plugin-react/locale';
import numeral from 'numeral';
import styles from './Analysis.less';
import { Bar } from '@/components/Charts';

// 引入 ECharts 主模块
import echarts from 'echarts';
// 引入柱状图
import 'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/map/js/china';

let myChart = null;

class SalesRanking extends Component {
  state = {
    LineCargo: [
      {
        name: '上海-遵义',
        value: 85,
      },
      {
        name: '上海-海口',
        value: 51,
      },
      {
        name: '上海-西安',
        value: 63,
      },
      {
        name: '上海-广州',
        value: 60,
      },
      {
        name: '上海-北京',
        value: 76,
      },
      {
        name: '上海-青岛',
        value: 65,
      },
      {
        name: '上海-郑州',
        value: 81,
      },
      {
        name: '上海-重庆',
        value: 72,
      },
      {
        name: '上海-长沙',
        value: 49,
      },
      {
        name: '上海-沈阳',
        value: 59,
      },
    ],
  };
  divRef = React.createRef();
  componentWillUnmount() {
    this.timer && clearInterval(this.timer);
  }

  componentDidMount() {
    const { LineCargo } = this.state;
    let yData = [];
    let barData = LineCargo;
    barData = barData.sort(function(a, b) {
      return b.value - a.value;
    });
    for (var j = 0; j < barData.length; j++) {
      if (j < 10) {
        yData.push('0' + j + barData[j].name);
      } else {
        yData.push(j + barData[j].name);
      }
    }
    const option = {
      backgroundColor: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: '#101239', // 0% 处的颜色
          },
          {
            offset: 1,
            color: '#120434', // 100% 处的颜色
          },
        ],
        global: false,
      },
      title: [
        {
          show: true,
          text: '航线货量排行',
          subtext: '单位：万吨',
          subtextStyle: {
            color: '#ffffff',
            lineHeight: 20,
          },
          textStyle: {
            color: '#fff',
          },
          top: 20,
        },
      ],
      grid: {
        left: 120,
        top: 80,
        bottom: 20,
      },
      xAxis: {
        show: false,
      },
      yAxis: {
        type: 'category',
        inverse: true,
        offset: '27',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          margin: 85,
          textStyle: {
            color: '#fff',
            align: 'left',
            fontSize: 14,
          },
          rich: {
            a: {
              color: '#fff',
              backgroundColor: '#f0515e',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 10,
            },
            b: {
              color: '#fff',
              backgroundColor: '#3D96FF',
              width: 20,
              height: 20,
              align: 'center',
              borderRadius: 10,
            },
          },
          formatter: function(params) {
            if (parseInt(params.slice(0, 2)) < 3) {
              return [
                '{a|' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2),
              ].join('\n');
            } else {
              return [
                '{b|' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2),
              ].join('\n');
            }
          },
        },
        data: yData,
      },
      series: [
        {
          name: 'barSer',
          type: 'bar',
          roam: false,
          visualMap: false,
          zlevel: 2,
          barMaxWidth: 16,
          barGap: 0,
          itemStyle: {
            normal: {
              color: function(params) {
                var colorList = [
                  {
                    colorStops: [
                      {
                        offset: 0,
                        color: '#f0515e',
                      },
                      {
                        offset: 1,
                        color: '#ef8554',
                      },
                    ],
                  },
                  {
                    colorStops: [
                      {
                        offset: 0,
                        color: '#3c38e4',
                      },
                      {
                        offset: 1,
                        color: '#24a5cd',
                      },
                    ],
                  },
                ];
                if (params.dataIndex < 3) {
                  return colorList[0];
                } else {
                  return colorList[1];
                }
              },
              barBorderRadius: [0, 15, 15, 0],
            },
          },
          label: {
            normal: {
              show: true,
              textBorderColor: '#333',
              textBorderWidth: 2,
            },
          },
          data: barData.sort((a, b) => {
            return b.value - a.value;
          }),
        },
      ],
    };
    this.timer_1 = setInterval(() => {
      if (this.divRef.current) {
        myChart = echarts.init(this.divRef.current);
        myChart.setOption(option);
        window.addEventListener('resize', function() {
          myChart.resize();
        });
        clearInterval(this.timer_1);
        this.timer = setInterval(() => {
          var dataidx = Math.floor(Math.random() * 10);
          var ranval = Math.floor(Math.random() * 10);
          barData[dataidx].value = barData[dataidx].value + ranval;
          option.series[0].data = option.series[0].data.sort(function(a, b) {
            return b.value - a.value;
          });
          let yLabelData = [];
          for (let j = 0; j < barData.length; j++) {
            if (j < 10) {
              yLabelData.push('0' + j + barData[j].name);
            } else {
              yLabelData.push(j + barData[j].name);
            }
          }
          option.yAxis.data = yLabelData;
          myChart.setOption(option, true);
        }, 2000);
      }
    }, 0);
  }

  render() {
    const { loading, height } = this.props;
    return (
      <Card loading={loading} bordered={false} bodyStyle={{ padding: 0 }}>
        <div
          style={{
            width: '100%',
            height,
            background: 'linear-gradient(180deg, rgba(16, 18, 57, 1) 0%, rgba(18, 4, 52, 1) 100%)',
          }}
          ref={this.divRef}
        />
      </Card>
    );
  }
}

export default SalesRanking;
